<template>
  <div class="xkrwgl">
    <div class="content">
      <el-card>
        <div class="btn-group">
          <el-button type="primary" @click="addTask">增加任务</el-button>
          <el-button type="danger" @click="deleteApply">删除</el-button>
        </div>
        <el-table
          :data="tableData"
          border
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="TaskId"
            label="任务编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="Name"
            label="任务名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="Term"
            label="所属学期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="StartTime"
            label="任务开始日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="EndTime"
            label="任务结束日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="TeacherEnable"
            label="是否对教师启用"
            width="180">
          </el-table-column>
          <el-table-column
            prop="StudentEnable"
            label="是否对学生启用"
            width="180">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData4)"
                type="text"
                size="small">
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!--增加任务-->
    <el-dialog title="提示" :visible.sync="dialogAddVisible" custom-class="add-task">
      <el-row>
        <el-col :span="18" :offset="3">
          <div>
            <span class="title">任务编号：</span>
            <el-input v-model="value1"></el-input>
            <el-button type="primary" size="mini">系统生成</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="3">
          <div>
            <span class="title">任务名称：</span>
            <el-input v-model="value2"></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="3">
          <div>
            <span class="title">所属学期：</span>
            <el-select v-model="value3" placeholder="请选择">
              <el-option
                v-for="item in value3options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="3">
          <div>
            <span class="title">开始日期：</span>
            <el-date-picker
              v-model="value4"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="3">
          <div>
            <span class="title">结束日期：</span>
            <el-date-picker
              v-model="value5"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="3">
          <div>
            <span class="title">对教师是否启用：</span>
            <el-select v-model="value6" placeholder="请选择">
              <el-option
                v-for="item in value6options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" :offset="3">
          <div>
            <span class="title">对学生是否启用：</span>
            <el-select v-model="value7" placeholder="请选择">
              <el-option
                v-for="item in value7options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">返 回</el-button>
        <el-button type="primary" @click="saveAddTask">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
  .xkrwgl {
    .content {
      .btn-group {
        margin-bottom: 10px;
      }
    }
    .add-task {
      .el-input, .el-select {
        width: 200px;
        display: inline-block;
      }
      .el-row {
        .el-col {
          margin-bottom: 10px;
          .title {
            display: inline-block;
            width: 120px;
          }
        }
      }
    }
  }
</style>

<script>
  import {getToken} from "../../utils/auth";
  export default {
    data() {
      return {
        tableData: [],
        currentPageValue: 1, // 当前第几页
        pageNum: 10, // 每页数量
        dialogAddVisible: false,
        value1: '',
        value2: '',
        value3: '',
        value3options: [
          {
            value: '第一学期',
            label: '第一学期',
          },
          {
            value: '第二学期',
            label: '第二学期',
          }
        ],
        value4: '',
        value5: '',
        value6: '',
        value6options: [
          {
            value: '启用',
            label: '启用',
          },
          {
            value: '未启用',
            label: '未启用',
          }
        ],
        value7: '',
        value7options: [
          {
            value: '启用',
            label: '启用',
          },
          {
            value: '未启用',
            label: '未启用',
          }
        ],
        courseID: [],
      }
    },
    methods: {
      handleSelectionChange(value) {
        console.log(value, 111)
        this.courseID = value
        console.log(this.courseID, 222)
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      addTask() {
        this.dialogAddVisible = true
      },
      async deleteApply() {
        // this.dialogAddVisible = true
        let params = {
          token: getToken(),
          id: this.courseID[0].Id,
        }
        let res = await this.axios.post('v1/xxkgl/task/del', params)
        if (res.data.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.loadTableData()
        }
      },
      async saveAddTask() {
        this.dialogAddVisible = false
        let params = {
          token: getToken(),
          taskId: this.value1,
          name: this.value2,
          term: this.value3,
          startTime: this.value4,
          endTime: this.value5,
          teacherEnable: this.value6,
          studentEnable: this.value7,
        }
        let res = await this.axios.post('v1/xxkgl/task/add_action', params)
        console.log(res)
        if (res.data.code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.loadTableData()
        }
      },
      async loadTableData() {
        let params = {
          token: getToken(),
          index: this.currentPageValue,
          pagemax: this.pageNum,
        }
        let res = await this.axios.get('v1/xxkgl/task/getdata', {params: params})
        console.log('哈哈')
        console.log(res)
        let resData = res.data
        this.tableData = resData.data
        this.totalData = resData.count
        // console.log(this.tableData)
      },
    },
    created() {
      this.loadTableData()
    }
  }
</script>
